<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${sys.sysName} + '登录页面'"></title>
    <!-- 引入公用部分 -->
    <script th:replace="head::static"></script>
    <style>
        /*上下左右居中*/
        .main {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 150px;
        }
        .beianBox{
            position: absolute;
            bottom: 50px;
            text-align: center;
            width: 100%;
        }
        .beianBox:after{
            content: '';
            display: block;
            clear: both;
        }
        .beianBox a,
        .beianBox a p,
        .beianBox a img{
            display: inline-block;
        }
        .beianBox a img{margin-top: -2px}
    </style>
</head>
<body>
<div class="main">
    <form class="layui-form layui-form-pane" autocomplete="off">
        <div class="layui-form-item">
            <h1 style="text-align: center" th:text="${sys.sysName}">XXX系统</h1>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账号<i class="layui-icon layui-icon-username"></i></label>
            <div class="layui-input-block">
                <input type="text" id="username" name="username" placeholder="请输入账号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码<i class="layui-icon layui-icon-password"></i></label>
            <div class="layui-input-block">
                <input type="password" id="password" name="password" placeholder="请输入密码" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" class="layui-input" style="float: left;width: 52%">
                <img id="captchaImg" th:src="@{/getVerifyCodeImage}" onclick="changeCode()"/><!-- <a href="javascript:changeCode()">看不清换一张</a>-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn" style="margin-left: -50px;margin-right: 50px;" onclick="formSubmit()">登录</a>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<div class="beianBox">
    <a href="http://www.beian.miit.gov.cn/" rel="nofollow" target="_blank"><p>京ICP备20022774号-1</p></a>

    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802032207" style=" margin-left: 10px;"><img src="https://seller.xydtax.cn/images/ga.png"/><p style="margin: 0px 0px 0px 5px;">京公网安备 11010802032207号</p></a>
</div>

</body>
<script th:inline="javascript">
    //获取后端RSA公钥并存到sessionStorage
    sessionStorage.setItem('javaPublicKey', [[${publicKey}]]);
    
    
    $(function(){
        document.onkeydown = function(e){  
          var ev = document.all ? window.event : e;
          if(ev.keyCode==13) {// 如（ev.ctrlKey && ev.keyCode==13）为ctrl+Center 触发
        	  formSubmit();
          }
        }
     });

    function formSubmit() {
        $.post(ctx + "/login", {
            username: $("#username").val(),
            password: $("#password").val(),
            captcha: $("#captcha").val(),
        }, function (data) {
            layui.use('layer', function () {
                var layer = layui.layer;
                if (data.code == 300) {
                    layer.msg(data.msg, {icon: 1,time: 1000}, function () {
                        window.location.href = ctx + data.url;
                    });
                } else {
                    layer.msg(data.msg, {icon: 2,time: 2000}, function () {});
                }
            });
        })
    }

    function changeCode() {
        var img = document.getElementById("captchaImg");
        img.src = ctx + "/getVerifyCodeImage?time=" + new Date().getTime();
    }
</script>
</html>